<template>
    <div class="cph-calc">
        <div class="header">
            <div class="flex title">
                <h1>CPH计算器</h1>
                <span>示例楼盘：<span class="name">{{ examplePropertiesInfo.name }}</span></span>
            </div>
            <div class="flex basic">
                <div v-for="item in examplePropertiesInfo.info" :key="item">
                    {{ item }}
                </div>
            </div>
        </div>
        <div class="table">
            <div class="flex title tr">
                <div v-for="(item) in mediaTypeList" :key="item.type" class="type-item">
                    <p class="name">
                        {{ item.name }}
                    </p>
                    <p class="way">
                        {{ item.desc }}
                    </p>
                </div>
            </div>
            <div v-for="(item, index) in tableList" :key="item.title" class="flex title tr">
                <div class="type-item">
                    <p class="way">
                        {{ item.title }}
                    </p>
                    <p class="unit" :class="index === 0 && 'way'">
                        {{ item.unit }}
                    </p>
                </div>
                <template v-for="(td, i) in item" :key="i">
                    <div v-if="i === 'num1' || i === 'num2' || i === 'num3'" class="type-item value" :class="index === 2 && 'red'">
                        <div>
                            <input
                                v-if="index === 1" v-model="item[i]" type="text" inputmode="decimal" :step="0.01" :min="0"
                                aria-labelledby="van-field-1-label" @focus="onFocus" @blur="onBlur" @input="onChange(i)"
                            >
                            <span v-else>
                                {{ item[i] }}
                            </span>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <div class="tips">
            <img src="@/assets/img/cph-tips.png" alt="">
            <div>
                <p v-for="item in examplePropertiesInfo.tips" :key="item">
                    {{ item }}
                </p>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { mediaTypeList, examplePropertiesInfo } from '@/utils/consts';
import { CphTableItemModel } from '@/views/products/brandBreakout/breakout.module';
import { store } from '@/store';

export interface TYPE {
    tableList: CphTableItemModel[];
}

const tableList = ref<CphTableItemModel[]>(JSON.parse(JSON.stringify(examplePropertiesInfo.table)) as CphTableItemModel[]);


const $emit = defineEmits(['focus', 'blur']);
const onFocus = () => {
    $emit('focus');
};
const onBlur = () => {
    $emit('blur');
};

const onChange = (num: string) => {
    let price = tableList.value[1][num];
    price = `${price}`.replace(/[^\d.]/g, '');
    if (Number(price) < 0) {
        tableList.value[1][num] = '0';
        return;
    }
    const arr = `${price}`.split('.');
    price = arr.length === 1 ? arr[0].slice(0, 5) : [arr[0].slice(0, 5), arr[1].slice(0, 2)].join('.');
    tableList.value[1][num] = price;
    const estimatedPrice = Number(tableList.value[1][num]);
    tableList.value[2][num] = Math.floor(estimatedPrice * Number(tableList.value[0][num]) / 1446 * 100) / 100;
};

onMounted(()=>{
    if(store.state.app.home.cphTableList?.length){
        tableList.value = store.state.app.home.cphTableList;
    }
});

defineExpose({
    tableList
});
</script>

<style scoped lang="scss">
.cph-calc {
    background: #ffffff;
    border-radius: 10px;
    padding: 16px 12px;

    .flex {
        display: flex;
    }

    .header {

        .title {
            justify-content: space-between;
            height: 22px;
            align-items: center;

            h1 {
                // font-family: PingFangSC-Medium;
                font-weight: 600;
                font-size: 16px;
                color: #333333;
            }

            span {
                color: #848484;
                font-size: 12px;
                // font-family: PingFangSC;
                font-weight: 400;
            }

            .name {
                color: #ff7c12;
            }
        }

        .basic {
            margin-top: 16px;
            font-weight: 400;
            font-size: 11px;
            color: #848484;

            div {
                height: 18px;
                line-height: 18px;
                background: #f8f8f8;
                border-radius: 2px;
                margin-right: 8px;
                padding: 0 4px;
                transform: scale(0.92);
            }
        }
    }

    .table {
        margin-top: 6px;

        .title {
            justify-content: flex-end;

            .type-item {
                width: 25%;
                text-align: center;
                color: #333333;

                .name {
                    height: 20px;
                    // font-family: PingFangSC-Medium;
                    font-weight: 600;
                    font-size: 14px;
                }

                .unit {
                    height: 16px;
                    // font-family: PingFangSC-Regular;
                    font-weight: 400;
                    font-size: 12px;
                    color: #b5b5b5;
                    text-align: center;
                    line-height: 16px;
                    margin-top: 2px;
                }

                .way {
                    height: 17px;
                    color: #333333;
                    // font-family: PingFangSC-Regular;
                    font-weight: 400;
                    font-size: 12px;
                }
            }

            .value {
                color: #333333;
                font-size: 14px;
                // font-family: PingFangSC;
                font-weight: 600;

                // padding: 0 10px;
                div {
                    margin: 0 6px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .red {
                color: #e60044;
            }

            input {
                display: block;
                box-sizing: border-box;
                width: 100%;
                height: 28px;
                min-width: 0;
                margin: 0;
                padding: 0 4px;
                line-height: inherit;
                background: #e6004408;
                border: 0.5px solid #e6004433;
                border-radius: 4px;
                outline: none;
                resize: none;
                box-shadow: none;
                appearance: none;
                user-select: auto;
                caret-color: #e60044;
                font-weight: 600;
                font-size: 14px;
                color: #e60044;
                text-align: center;
            }
        }

        .tr {
            padding: 10px 0;
            border-bottom: 1px solid #f4f4f4;
            align-items: center;
        }
    }

    .tips {
        margin-top: 12px;
        display: flex;

        img {
            width: 14px;
            height: 14px;
            margin-right: 8px;
            margin-top: 1px;
        }

        p {
            // font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 12px;
            color: #b5b5b5;
            line-height: 17px;
        }
    }
}
</style>
